<template>
  <div>
    <div class="app-container">
      <div class="detail_page">
        <div class="page_header gongyuan_header">服务人员详情</div>
        <div class="row">
          <div class="col">
            <div class="detail_label">登录名:</div>
            <div class="detail_value gongyuan_content_value">{{formData.userName}}</div>
          </div>
          <div class="col">
            <div class="detail_label gongyuan_content">姓名:</div>
            <div class="detail_value gongyuan_content_value">{{formData.nickName}}</div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="detail_label gongyuan_content">身份证号:</div>
            <div class="detail_value gongyuan_content_value">{{formData.cardId}}</div>
          </div>
          <div class="col">
            <div class="detail_label gongyuan_content">联系方式:</div>
            <div class="detail_value gongyuan_content_value">{{formData.phonenumber}}</div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="detail_label gongyuan_content">部门:</div>
            <div class="detail_value gongyuan_content_value">{{dept}}</div>
          </div>
          <div class="col">
            <div class="detail_label gongyuan_content">职务:</div>
            <div class="detail_value gongyuan_content_value">{{post}}</div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="detail_label gongyuan_content">分权配重:</div>
            <div class="detail_value gongyuan_content_value">{{formData.servicePersonaProportion}}</div>
          </div>
          <div class="col">
            <div class="detail_label gongyuan_content">入职时间:</div>
            <div class="detail_value gongyuan_content_value">{{formData.startData}}</div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="detail_label gongyuan_content">性别:</div>
            <div class="detail_value gongyuan_content_value">{{sex}}</div>
          </div>
          <div class="col">
            <div class="detail_label gongyuan_content">毕业院校:</div>
            <div class="detail_value gongyuan_content_value">{{formData.school}}</div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="detail_label gongyuan_content">是否禁用:</div>
            <div class="detail_value gongyuan_content_value">{{status}}</div>
          </div>
          <div class="col">
            <div class="detail_label gongyuan_content">技能:</div>
            <div class="detail_value gongyuan_content_value">{{servicePersonaFun}}</div>
          </div>
        </div>

        <div class="row">
          <div class="col">
            <div class="detail_label gongyuan_content">居住地址:</div>
            <div class="detail_value gongyuan_content_value">{{formData.province}}/{{formData.city}}/{{formData.area}}</div>
          </div>
          <div class="col">
            <div class="detail_label gongyuan_content">详细地址:</div>
            <div class="detail_value gongyuan_content_value">{{formData.addressDetail}}</div>
          </div>
        </div>

        <div class="row">
          <div class="detail_label gongyuan_content">服务地址:</div>
          <div class="detail_value gongyuan_content_value">
            <div style="margin-bottom: 10px;" v-for="(per,index) of formData.servicePersonalAreas" :key="index">{{per.province}}/{{per.city}}/{{per.area}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { treeselect } from '@/api/system/dept'
import { getUser } from '@/api/system/user'
import { createCURD } from '@/api/sys'
const fetchApi = createCURD('personal')
export default {
  name: 'Personaldetail',
  components: {},
  data() {
    return {
      formData: {
        userName: undefined,
        nickName: undefined,
        cardId: undefined,
        phonenumber: undefined,
        deptId: undefined,
        postIds: [],
        servicePersonaProportion: undefined,
        startData: null,
        sex: 0,
        school: undefined,
        status: 0,
        servicePersonaFun: [],
        addressArr: [],
        addressDetail: undefined,
        //
        servicePersonalAreas: [[]]
      },
      deptOptions: [],
      postOptions: [],
      sexOptions: [
        {
          label: '男',
          value: 0
        },
        {
          label: '女',
          value: 1
        }
      ],
      statusOptions: [
        {
          label: '否',
          value: 0
        },
        {
          label: '是',
          value: 1
        }
      ],
      servicePersonaFunOptions: []
    }
  },
  computed: {
    ID() {
      return this.$route.query.id
    },
    status() {
      return this.findSelectText(this.formData.status, this.statusOptions)
    },
    sex() {
      return this.findSelectText(this.formData.sex, this.sexOptions)
    },
    post() {
      return this.findCheckboxText(this.formData.postIds, this.postOptions)
    },
    servicePersonaFun() {
      return this.findCheckboxText(this.formData.servicePersonaFun, this.servicePersonaFunOptions)
    },
    dept() {
      return this.findDepText(this.deptOptions)
    }
  },
  async created() {
    getUser().then((response) => {
      this.postOptions = response.posts.map((per) => ({
        label: per.postName,
        value: per.postId
      }))
    })
    this.getTreeselect()
    this.initDictsOptions('service_personal_fun', 'servicePersonaFunOptions')
  },
  async mounted() {
    try {
      const res = await fetchApi.detail(this.ID)
      this.formData = Object.assign(this.formData, res.data)
    } catch (error) {
      console.log(error)
    }
  },
  // 编辑类不缓存
  // async activated() {
  // },
  methods: {
    async initDictsOptions(dicts, listProps) {
      try {
        const res = await this.getDicts(dicts)
        if (res.code === 200) {
          this[listProps] = res.data.map((per) => ({
            label: per.dictLabel,
            value: per.dictValue
          }))
        }
      } catch (error) {
        console.log(error)
      }
    },
    getTreeselect() {
      treeselect().then((response) => {
        this.deptOptions = response.data
      })
    },
    findDepText(deptOptions) {
      for (let i = 0; i < deptOptions.length; i++) {
        let perDep = deptOptions[i]
        if (perDep.id === this.formData.deptId) {
          return perDep.label
        } else if (perDep.children) {
          let label = this.findDepText(perDep.children)
          if (!!label) return label
        }
      }
      return ''
    },
    findSelectText(value, options) {
      const obj = options.find((item) => {
        return item.value === value
      }) || { lable: '' }
      return obj.label
    },
    findCheckboxText(values, options) {
      if (values.length > 0) {
        return values
          .map((per) => {
            const obj = options.find((item) => item.value === per) || { label: '' }
            return obj.label
          })
          .join(',')
      }
      return ''
    }
  }
}
</script>

<style lang='scss' scoped>
.col {
  width: 35%;
  flex: 0 0 auto;
}
</style>




